<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>/home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_Accordion.js</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="../assets/css/logo.png" title=""></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/Accordion.html">Accordion</a></li>
            
                <li><a href="../classes/AutoComplete.html">AutoComplete</a></li>
            
                <li><a href="../classes/Button.html">Button</a></li>
            
                <li><a href="../classes/Carousel.html">Carousel</a></li>
            
                <li><a href="../classes/ColorPicker.html">ColorPicker</a></li>
            
                <li><a href="../classes/Combobox.html">Combobox</a></li>
            
                <li><a href="../classes/DateTimePicker.html">DateTimePicker</a></li>
            
                <li><a href="../classes/Grid.html">Grid</a></li>
            
                <li><a href="../classes/ListView.html">ListView</a></li>
            
                <li><a href="../classes/Popover.html">Popover</a></li>
            
                <li><a href="../classes/ProgressBar.html">ProgressBar</a></li>
            
                <li><a href="../classes/RichTextEditor.html">RichTextEditor</a></li>
            
                <li><a href="../classes/ScrollSpy.html">ScrollSpy</a></li>
            
                <li><a href="../classes/Select.html">Select</a></li>
            
                <li><a href="../classes/SideBar.html">SideBar</a></li>
            
                <li><a href="../classes/Slider.html">Slider</a></li>
            
                <li><a href="../classes/Spinner.html">Spinner</a></li>
            
                <li><a href="../classes/Tab.html">Tab</a></li>
            
                <li><a href="../classes/ToolBar.html">ToolBar</a></li>
            
                <li><a href="../classes/Tooltip.html">Tooltip</a></li>
            
                <li><a href="../classes/Tree.html">Tree</a></li>
            
                <li><a href="../classes/Wizard.html">Wizard</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: /home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_Accordion.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
 * @author zjh
 */
+function ($) { &quot;use strict&quot;;

  // COLLAPSE PUBLIC CLASS DEFINITION
  // ================================
	
	/**
	 * 原版的Bootstrap的Collapse
	 * @class Accordion
	 * @constructor
	 * @example
	 * 	&lt;div id=&quot;accordion&quot; class=&quot;panel-group&quot;&gt;
	 *	  &lt;div class=&quot;panel panel-default&quot;&gt;
	 *	    &lt;div class=&quot;panel-heading&quot;&gt;
	 *	      &lt;h4 class=&quot;panel-title&quot;&gt;
	 *	        &lt;a href=&quot;#collapseOne&quot; data-parent=&quot;#accordion&quot; data-toggle=&quot;collapse&quot; class=&quot;collapsed&quot;&gt;
	 *	          菜单1
	 *	        &lt;/a&gt;
	 *	      &lt;/h4&gt;
	 *	    &lt;/div&gt;
	 *	    &lt;div class=&quot;panel-collapse collapse&quot; id=&quot;collapseOne&quot; style=&quot;height: 0px;&quot;&gt;
	 *	      &lt;div class=&quot;panel-body&quot;&gt;
	 *	        折叠内容1
	 *	      &lt;/div&gt;
	 *	    &lt;/div&gt;
	 *	  &lt;/div&gt;
	 *	  &lt;div class=&quot;panel panel-default&quot;&gt;
	 *	    &lt;div class=&quot;panel-heading&quot;&gt;
	 *	      &lt;h4 class=&quot;panel-title&quot;&gt;
	 *	        &lt;a href=&quot;#collapseTwo&quot; data-parent=&quot;#accordion&quot; data-toggle=&quot;collapse&quot; class=&quot;collapsed&quot;&gt;
	 *	          菜单2
	 *	        &lt;/a&gt;
	 *	      &lt;/h4&gt;
	 *	    &lt;/div&gt;
	 *	    &lt;div class=&quot;panel-collapse collapse&quot; id=&quot;collapseTwo&quot; style=&quot;height: 0px;&quot;&gt;
	 *	      &lt;div class=&quot;panel-body&quot;&gt;
	 *	        折叠内容2
	 *	      &lt;/div&gt;
	 *	    &lt;/div&gt;
	 *	  &lt;/div&gt;
	 *	  &lt;div class=&quot;panel panel-default&quot;&gt;
	 *	    &lt;div class=&quot;panel-heading&quot;&gt;
	 *	      &lt;h4 class=&quot;panel-title&quot;&gt;
	 *	        &lt;a href=&quot;#collapseThree&quot; data-parent=&quot;#accordion&quot; data-toggle=&quot;collapse&quot; class=&quot;&quot;&gt;
	 *	          菜单3
	 *	        &lt;/a&gt;
	 *	      &lt;/h4&gt;
	 *	    &lt;/div&gt;
	 *	    &lt;div class=&quot;panel-collapse collapse in&quot; id=&quot;collapseThree&quot; style=&quot;height: auto;&quot;&gt;
	 *	      &lt;div class=&quot;panel-body&quot;&gt;
	 *	        折叠内容3
	 *	      &lt;/div&gt;
	 *	    &lt;/div&gt;
	 *	  &lt;/div&gt;
	 *	&lt;/div&gt;
	 */
	var Accordion = function (element, options) {
	  this.$element      = $(element);
	  this.options       = $.extend({}, Accordion.DEFAULTS, options);
	  this.transitioning = null;

	  if (this.options.parent) this.$parent = $(this.options.parent);
	  if (this.options.toggle) this.toggle();
	};

	Accordion.DEFAULTS = {
		/**
		 * 点击其他时是否切换
		 * @property toggle
		 * @type Boolean
		 * @default true
		 */
		toggle: true						//是否切换
	};

  	Accordion.prototype = {
  		
  		/**
  		 * @private
  		 * @method dimemsion
  		 * @return {String} &#x27;width&#x27; or &#x27;height&#x27;
  		 */
  		dimension:function(){
  			var hasWidth = this.$element.hasClass(&#x27;width&#x27;);
  		    return hasWidth ? &#x27;width&#x27; : &#x27;height&#x27;;
  		},
  		
  		/**
  		 * 显示
  		 * @method show
  		 */
  		show:function(){
  			if (this.transitioning || this.$element.hasClass(&#x27;in&#x27;)) return

  		    var startEvent = $.Event(&#x27;show.koala.accordion&#x27;);
  		    this.$element.trigger(startEvent);
  		    if (startEvent.isDefaultPrevented()) return;

  		    var actives = this.$parent &amp;&amp; this.$parent.find(&#x27;&gt; .panel &gt; .in&#x27;);

  		    if (actives &amp;&amp; actives.length) {
  		      var hasData = actives.data(&#x27;koala.accordion&#x27;);
  		      if (hasData &amp;&amp; hasData.transitioning) return;
  		      actives.accordion(&#x27;hide&#x27;);
  		      hasData || actives.data(&#x27;koala.accordion&#x27;, null);
  		    }

  		    var dimension = this.dimension();

  		    this.$element
  		      .removeClass(&#x27;accordion&#x27;)
  		      .addClass(&#x27;collapsing&#x27;)
  		      [dimension](0);

  		    this.transitioning = 1;

  		    var complete = function () {
  		      this.$element
  		        .removeClass(&#x27;collapsing&#x27;)
  		        .addClass(&#x27;in&#x27;)
  		        [dimension](&#x27;auto&#x27;);
  		      this.transitioning = 0;
  		      this.$element.trigger(&#x27;shown.koala.accordion&#x27;);
  		    };

  		    if (!$.support.transition) return complete.call(this);

  		    var scrollSize = $.camelCase([&#x27;scroll&#x27;, dimension].join(&#x27;-&#x27;));

  		    this.$element
  		      .one($.support.transition.end, $.proxy(complete, this))
  		      .emulateTransitionEnd(350)
  		      [dimension](this.$element[0][scrollSize]);
  		},
  		
  		/**
  		 * 隐藏
  		 * @method hide
  		 */
  		hide:function(){
  			if (this.transitioning || !this.$element.hasClass(&#x27;in&#x27;)) return

  		    var startEvent = $.Event(&#x27;hide.koala.accordion&#x27;);
  		    this.$element.trigger(startEvent);
  		    if (startEvent.isDefaultPrevented()) return;

  		    var dimension = this.dimension();

  		    this.$element
  		      [dimension](this.$element[dimension]())
  		      [0].offsetHeight;

  		    this.$element
  		      .addClass(&#x27;collapsing&#x27;)
  		      .removeClass(&#x27;accordion&#x27;)
  		      .removeClass(&#x27;in&#x27;);

  		    this.transitioning = 1;

  		    var complete = function () {
  		      this.transitioning = 0;
  		      this.$element
  		        .trigger(&#x27;hidden.koala.accordion&#x27;)
  		        .removeClass(&#x27;collapsing&#x27;)
  		        .addClass(&#x27;accordion&#x27;);
  		    };

  		    if (!$.support.transition) return complete.call(this);

  		    this.$element
  		      [dimension](0)
  		      .one($.support.transition.end, $.proxy(complete, this))
  		      .emulateTransitionEnd(350);
  		},
  		
  		/**
  		 * 根据class切换显示/隐藏
  		 * @method toggle
  		 */
  		toggle:function(){
  			this[this.$element.hasClass(&#x27;in&#x27;) ? &#x27;hide&#x27; : &#x27;show&#x27;]();
  		}
  	};

  // COLLAPSE PLUGIN DEFINITION
  // ==========================

  	var old = $.fn.accordion;

  	$.fn.accordion = function (option) {
  		return this.each(function () {
			var $this   = $(this);
			var data    = $this.data(&#x27;koala.accordion&#x27;);
			var options = $.extend({}, Accordion.DEFAULTS, $this.data(), typeof option == &#x27;object&#x27; &amp;&amp; option);
	
			if (!data) $this.data(&#x27;koala.accordion&#x27;, (data = new Accordion(this, options)));
			if (typeof option == &#x27;string&#x27;) data[option]();
  		});
  	};

  	$.fn.accordion.Constructor = Accordion;


  // COLLAPSE NO CONFLICT
  // ====================

  	$.fn.accordion.noConflict = function () {
  		$.fn.accordion = old;
  		return this;
	};


  // COLLAPSE DATA-API
  // =================

	$(document).on(&#x27;click.koala.accordion.data-api&#x27;, &#x27;[data-toggle=accordion]&#x27;, function (e) {
		var $this   = $(this), href;
		var target  = $this.attr(&#x27;data-target&#x27;)|| e.preventDefault()
        	|| (href = $this.attr(&#x27;href&#x27;)) &amp;&amp; href.replace(/.*(?=#[^\s]+$)/, &#x27;&#x27;); //strip for ie7
    	var $target = $(target);
	    var data    = $target.data(&#x27;koala.accordion&#x27;);
	    var option  = data ? &#x27;toggle&#x27; : $this.data();
	    var parent  = $this.attr(&#x27;data-parent&#x27;);
	    var $parent = parent &amp;&amp; $(parent);

	    if (!data || !data.transitioning) {
	      if ($parent) $parent.find(&#x27;[data-toggle=accordion][data-parent=&quot;&#x27; + parent + &#x27;&quot;]&#x27;).not($this).addClass(&#x27;collapsed&#x27;);
	      $this[$target.hasClass(&#x27;in&#x27;) ? &#x27;addClass&#x27; : &#x27;removeClass&#x27;](&#x27;collapsed&#x27;);
	    };

	    $target.accordion(option);
	});

}(window.jQuery);
    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
